<template>
  <a-form-model
    :model="form"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
    :layout="layout"
    ref="form"
  >
    <!-- 搜索选项 -->
    <a-form-model-item label="搜索类型">
      <a-select v-model="form.type" placeholder="选择项目名或者用户名" defaultActiveFirstOption>
        <a-select-option value="projectName"> 项目名(模糊查询) </a-select-option>
        <a-select-option value="userName"> 用户名(精确查询) </a-select-option>
        <a-select-option value="projectId"> 项目ID(精确查询) </a-select-option>
      </a-select>
    </a-form-model-item>

    <!-- 搜索框 -->
    <a-form-model-item label="搜索">
      <a-input v-model="form.keywords" />
    </a-form-model-item>

    <!-- 搜索按钮 -->
    <a-form-model-item :wrapperCol=btnWrapperCol>
      <a-button type="primary" @click="submit"> 搜索 </a-button>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
export default {
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 8 },
      btnWrapperCol: { span: 24},
      layout: "horizontal",
      form: {
        keywords: "",
        type: "projectName"
      },
    };
  },
  methods: {
    submit() {
        this.$emit("getProject", this.form);
    }
  },
};
</script>

<style>
.ant-form-item-control {
  text-align: center;
}
</style>